<template>
	<view class="container">
		<view v-for="(item, index) in list" :key="index">
			<view>
				{{item.name}}
			</view>
			<view v-for="(item2, index2) in item.children" :key="index2">
				{{item2.name}}
			</view>
		</view>
		<up-radio-group v-model="value" placement="column" iconPlacement="right" borderBottom @change="radioChange">
			<up-radio :customStyle="{marginBottom: '8px',marginTop: '8px'}" v-for="(item, index) in list" :key="index"
				:label="item.name" :name="item.id">
			</up-radio>
		</up-radio-group>
	</view>
</template>
<script>
	import {
		categoryListApi
	} from '@/api/service.js'
	import {
		onLoad,
		onUnload
	} from "@dcloudio/uni-app"
	import {
		reactive,
		toRefs,
		ref,
	} from "vue"
	export default {

		setup() {
			const state = reactive({
				list: [],
				value: '',
			})
			onLoad((option) => {
				if (option.categoryId) {
					state.value = Number(option.categoryId)
				}
				getData()
			})
			const radioChange = (categoryId) => {
				let arr = state.list.filter((item) => item.id === categoryId)
				if (arr.length > 0) {
					uni.$emit('getCategory', arr[0])
					uni.navigateBack(-1)
				}

			}
			const getData = async () => {
				const {
					data
				} = await categoryListApi()
				var tree = buildTree(data);
				console.log(tree);
				state.list = tree
			}

			function buildTree(items) {
				// 创建一个映射来存储所有节点，以id为键  
				const nodeMap = new Map();
				// 创建一个空数组来存放根节点  
				const roots = [];

				// 遍历所有项，创建节点并存储在nodeMap中  
				for (let item of items) {
					// 创建节点对象，初始化children数组  
					let node = {
						...item,
						children: []
					};
					// 将节点添加到nodeMap中  
					nodeMap.set(item.id, node);
					// 如果parentId为null或undefined，则该节点是根节点  
					if (item.parentId === null || item.parentId === undefined) {
						// 将根节点添加到roots数组中  
						roots.push(node);
					}
				}

				// 遍历所有项（或nodeMap的values），为每个节点找到并添加子节点  
				for (let node of nodeMap.values()) {
					// 如果该节点有parentId且parentId对应的节点已存在  
					if (node.parentId !== null && node.parentId !== undefined && nodeMap.has(node.parentId)) {
						// 找到父节点并添加当前节点作为子节点  
						nodeMap.get(node.parentId).children.push(node);
					}
				}

				// 返回根节点数组（或单个根节点，如果只有一个）  
				if (roots.length === 1) {
					return roots[0]; // 返回单个根节点  
				}
				return roots; // 返回根节点数组  
			}


			return {
				...toRefs(state),
				radioChange,
			}
		}
	}
</script>

<style>
	.container {
		background: #fff;
		margin-top: 10rpx;
		padding: 20rpx 20rpx 0 20rpx;
	}
</style>